<template>
  <view class="header" :style="style">
    <view class="flexbox"
      :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
      <image class="back-img" :src="imgUrl +  'index/top-back.png'"></image>
      <image class="logo-img" :src="imgUrl +  'index/index-logo.png?v=2.5'"></image>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgUrl: this.$imgUrl,
        statusBarH: 20,
        customBarH: 70
      }
    },
    computed: {
      style() {
        let _style = `height: ${this.customBarH}px;`
        return _style
      }
    },
    methods: {
      goBack() {
        uni.navigateBack()
      }
    },
    created() {
      let self = this;
      uni.getSystemInfo({
        success: function(e) {
          self.statusBarH = e.statusBarHeight + 10
          let custom = uni.getMenuButtonBoundingClientRect()
          self.customBarH = custom.height+custom.top +10
          self.$emit('getMarginTop', self.customBarH)
        }
      })
    }
  }
</script>

<style lang="scss">
  .header {
    width: 100vw;
    position: fixed;
    z-index: 999;
  }

  .flexbox {
    // display: flex;
    // justify-content: space-between;
    // padding: 0 20px;
    height: 100%;
    .back-img {
      width: 750rpx;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .logo-img {
      width: 340rpx;
      height: 34rpx;
      position: absolute;
      bottom: 20rpx;
      left: 30rpx;
    }
  }
</style>